<template>
    <a-button
            type="primary"
            @click="handleModalOpen"
    >添加设备
    </a-button>
    <a-modal
            v-model:visible="visible"
            title="Basic Modal"
            @ok="handleOk"
    >
        <a-form
                :model="formState"
                name="basic"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
        >
            <a-row>
                <a-col
                        :span="8"
                        :offset="2"
                >
                    <a-form-item
                            label="省份"
                            name="province"
                            :wrapper-col="{ span: 20}"
                            :label-col="{ span: 6}"
                    >
                        <a-input
                                readOnly
                                v-model:value="formState.province"
                        ></a-input>
                    </a-form-item>
                </a-col>
                <a-col
                        :span="8"
                        :offset="2"
                >
                    <a-form-item
                            label="城市"
                            name="city"
                            :wrapper-col="{ span: 20}"
                            :label-col="{ span: 6}"
                    >
                        <a-input
                                readOnly
                                v-model:value="formState.city"
                        ></a-input>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row>
                <a-col
                        :span="8"
                        :offset="2"
                >
                    <a-form-item
                            label="经度"
                            name="longitude"
                            :wrapper-col="{ span: 20}"
                            :label-col="{ span: 6}"
                    >
                        <a-input
                                readOnly
                                v-model:value="formState.longitude"
                        ></a-input>
                    </a-form-item>
                </a-col>
                <a-col
                        :offset="2"
                        :span="8">
                    <a-form-item
                            label="纬度"
                            name="latitude"
                            :wrapper-col="{ span: 20}"
                            :label-col="{ span: 6}"
                    >
                        <a-input
                                readOnly
                                v-model:value="formState.latitude"
                        ></a-input>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-form-item
                    label="位置"
                    :label-col="{offset: 2}"
                    :wrapper-col="{ offset: 1}"
            >
                <a-button
                        type="primary"
                        @click="openMapHandler"
                >选择位置
                </a-button>
            </a-form-item>
        </a-form>
    </a-modal>

    <!-- 此处也可以抽离成单独的Modal组件,
         通过refs + props的方式完成
    -->
    <a-modal
            v-model:visible="mapVisible"
            title="选择位置"
            width="100%"
            wrap-class-name="full-modal"
            @ok="onSelectPosition"
    >
        <my-baidu-map
                ref="map"
                v-if="mapVisible"
        ></my-baidu-map>
    </a-modal>
</template>

<script lang="ts" setup>
    import MyBaiduMap from '@/components/my-baidu-map';
    import {
        ref,
        reactive,
        onMounted,
    } from "vue";
    import { IPositionInfo } from "@/components/my-baidu-map/extends";

    /* 定义FormState类型 */
    interface IFormState {
        province: string | number;
        city: string | number;
        longitude: string | number;
        latitude: string | number;
    }
    /* 表单对象 */
    const formState = reactive<IFormState>({
        province: '',
        city: '',
        longitude: '',
        latitude: ''
    });

    /* 定义map子组件数据类型 */
    interface IMap {
        positionInfo?: IPositionInfo
    }
    const map = ref<IMap>({});
    /* 表单显隐 */
    const visible = ref<Boolean>(false);
    /* 地图表单显隐 */
    const mapVisible = ref<Boolean>(false);

    /* 打开表单事件 */
    const handleModalOpen = (): void => {
        visible.value = true;
    };

    /* 可以在此处发起axios请求等 */
    const handleOk = (): void => {

    };

    /* 打开地图事件 */
    const openMapHandler = (): void => {
        mapVisible.value = true;
    };

    /* 确认位置事件 */
    const onSelectPosition = (): void => {
        const { positionInfo } = map.value;
        formState.latitude = positionInfo?.lat as number;
        formState.longitude = positionInfo?.lng as number;
        formState.city = positionInfo?.city as string;
        formState.province = positionInfo?.province as string;
        mapVisible.value = false;
    };
</script>

<style lang="scss">
    body,
    html,
    #app {
        height: 100%;
    }

    .BMap_CityListCtrl div {
        box-sizing: content-box;
    }

    #allmap {
        height: 800px;
    }

    /* 设置Modal为全屏显示 */
    .full-modal {
        .ant-modal {
            max-width: 100%;
            top: 0;
            padding-bottom: 0;
            margin: 0;
        }

        .ant-modal-content {
            display: flex;
            flex-direction: column;
            height: calc(100vh);
        }

        .ant-modal-body {
            flex: 1;
        }
    }
</style>
